<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.main{
				width:1000px;
				height: 750px;
				background-image: url(img/未标题-2.jpg)
			}
		
			.pg{
				position:absolute ;
				color: blue;
				width: 160px;
				height: 139px;
				background-image: url(img/僵尸1.gif);
				font-size:50px;
				text-align: center;
			}
			
			#zhengque{
				height:50px;
				position: absolute;
				left: 50px;
				top: 45px;
			}
			
			#sudu{
				height:50px;
				position: absolute;
				left: 550px;
				top: 45px;
			}
			
			#shijian{
				width:200px ;
				height:50px;
				position:absolute;
				left:290px;
				top:55px;
			}
			
			.ss1{
				position:absolute;
				left: 165px;
				top: 200px;
			}
			
			.ss2{
				position:absolute;
				left: 165px;
				top: 285px;
			}
f			
			.ss3{
				position:absolute;
				width: 63px;
				height:70px;
				left: 165px;
				top: 500px;
			}
			
			.ss4{
				position:absolute;
				left: 165px;
				top: 470px;
			}
			
			.ss5{
				position:absolute;
				left: 165px;
				top: 565px;
			}
			
			.text {
				font-size: 20px;
				font-weight: bold;
				color: white;
			}
			
			.kaishi {
				width: 100px;
				height: 45px;
				position: absolute;
				left: 845px;
				top: 80px;
				cursor: pointer;
			}
			
			
			
			.zanting {
				width: 65px;
				height: 20px;
				position: absolute;
				left: 820px;
				top: 40px;
				cursor: pointer;
			}
			
			.tuichu {
				width: 50px;
				height: 20px;
				position: absolute;
				left: 905px;
				top: 45px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="main">
	        <div class="right">
	        	
	        </div>
			<div class="ss1"><img src="img/豌豆射手.gif"/></div>
			<div class="ss2"><img src="img/豌豆射手.gif"/></div>
			
			<div class="ss4"><img src="img/豌豆射手.gif"/></div>
			<div class="ss5"><img src="img/豌豆射手.gif"/></div>
		    <div class="bottom">
							<div class="kaishi" onclick="kaishi()"></div>
							<div class="zanting" onclick="zanting()"></div>
							<div class="tuichu" onclick="tuichu()"></div>
							<div id="zhengque" class="text"><p style="font size: 17px;">正确率:<span>100%</span></p></div>
							<div id="shijian" class="text"><p style="font size: 17px;">时间:<span>00:00:00</span></p></div>
							<div id="sudu" class="text"><p style="font size: 17px;">速度:<span>1个/分钟</span></p></div>
		    </div>

		</div>
		<script type="text/javascript">
			var nz1 = 0;
			var stop=0;
			var time=0;
			timeid=0;
			var count=0;
			var sum=0;
			var jz=0;

			function zanting() {
				clearInterval(nz1);
				clearInterval(stop);
				clearInterval(timeid);
				nz1 = 0;
				stop=0;
				timeid=0;
			}

			function tuichu() {
				window.close();
			}
			
			window.onkeydown = function(event){
				if(nz1!=0){
					var divtop=document.querySelector(".right");
					for (var i=0;i<divtop.children.length;i++) {
						var k =divtop.children[i].getAttribute("key");
						if(k == event.keyCode){
							divtop.removeChild(divtop.children[i]);
							jz++;
							var bd=parseInt((jz/time)*60);
                            document.querySelector("#sudu").innerHTML="速度："+bd+"个/分钟";
							break;
						}
					}
				}
			}

			function kaishi() {
				var right =document.querySelector(".right")
				if(nz1 == 0) {
					nz1 = setInterval(function() {
						for(var i=0;i<right.children.length;i++){
							var pg = right.children[i];
							var t=parseInt(pg.style.left)-2;
							pg.style.left=t+"px";
							if(t<=200){
								right.removeChild(right.children[i])
								count++;
								var de=parseInt((1-count/sum)*100);
								document.querySelector("#zhengque").innerHTML="正确率："+de+"%"
							}
						}
					}, 50);
				}
				var mycars=new Array(180,270,360,450,540);
				
				stop=setInterval(function(){
					var div=document.createElement("div");
					div.className="pg";
					div.style.left="800px";
					div.style.top=mycars[parseInt(Math.random()*5)]+"px";
					var ch=parseInt(Math.random()*26)+65;
					div.setAttribute("key",ch);
					div.innerHTML="&#"+ch+";";
					document.querySelector(".right").appendChild(div);
					sum++
					var de=parseInt((1-count/sum)*100);
					document.querySelector("#zhengque").innerHTML="正确率："+de+"%"
					
				},1000);
					
				timeid=setInterval(function(){
			        time++;
			        var ss =time%60;
			        ss=ss<10?"0"+ss:ss;
			        var mm =parseInt(time/60);
			        mm=mm<10?"0"+mm:mm;
			    	var hh =parseInt(time/3600);
			    	hh=hh<10?"0"+hh:hh;
			    	var divtime =document.querySelector("#shijian");
			    	divtime.innerHTML="时间："+hh+"："+mm+":"+ss;
				},1000);
			}
				</script>
	</body>
</html>
